<!--
  功能：功能描述
  作者：kangjie
  邮箱：kangjie@briup.com
  时间：2021年07月13日 17:04:46
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class>
    <!-- 标签头 -->
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="所有订单" name="所有订单"></el-tab-pane>
        <el-tab-pane label="待支付" name="待支付"></el-tab-pane>
        <el-tab-pane label="待派单" name="待派单"></el-tab-pane>
        <el-tab-pane label="待接单" name="待接单"></el-tab-pane>
        <el-tab-pane label="待服务" name="待服务"></el-tab-pane>
        <el-tab-pane label="待确认" name="待确认"></el-tab-pane>
        <el-tab-pane label="已完成" name="已完成"></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 表格 -->
    <div>
      <el-table :data="tableData" style="width: 100%;font-size:14px">
        <el-table-column prop="id" label="订单编号" width="180"></el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="180" align="center">
          <template
            slot-scope="scope"
          >{{moment(scope.row.orderTime).format('YYYY-MM-DD :HH:mm:ss')}}</template>
        </el-table-column>
        <el-table-column prop="total" label="总价" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.status==='待派单'">{{scope.row.status}}</el-tag>
            <el-tag
              type="info"
              v-else-if="scope.row.status==='待服务' || scope.row.status==='已完成'"
            >{{scope.row.status}}</el-tag>
            <el-tag type="warning" v-else>{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="customerId" label="顾客ID" align="center"></el-table-column>
        <el-table-column
          prop="employeeId"
          align="center"
          label="员工ID"
          v-if="this.activeName!=='待支付'&&this.activeName!=='待派单'"
        >
          <template slot-scope="scope">{{scope.row.employeeId || '--'}}</template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160" alignx="center">
          <template slot-scope="scope">
            <el-button @click="todetails(scope.row)" type="text" class="black_info">详情</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==='待派单'" @click="toSend(scope.row)">派单</el-button>
            <el-button type="text" size="small" v-if="scope.row.status==='待接单'" class="cancle" >取消派单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="params.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <!-- 派单模态框 -->
    <el-dialog title="派单" :visible.sync="visible" width="50%">
      <el-radio v-model="searchFrom"  v-for="item in roleData" :key="item.id"  :label="item.username" border></el-radio>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
let moment = require("moment");
import {
  pageQuery,
  cancelSendOrder,
  confirmOrder,
  deleteById,
  rejectOrder,
  sendOrder,
  serviceCompleteOrder,
  submitOrder,
  takeOrder,
  queryData
} from "@/api/order";
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      searchFrom:{},
      roleData:[],
      total: 0,
      visible:false,
      tableData: [],
      params: {
        page: 1,
        pageSize:10,
        roleId:1
      },
      activeName: "所有订单"
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    params: {
      handler() {
        this.handleClick();
      },
      deep: true
    }
  },
  // 组件方法
  methods: {
    // 提交派单信息
    async submit(){
      let temp={
        ...this.searchFrom
      }
      let res =await sendOrder(temp);
      console.log(res);
    },
    // 派单
    async toSend(row){
      this.visible=true;
      let temp={
        ...this.params,
      }
      let res =await queryData(temp);
      // console.log(res);
      this.roleData=res.data.list;
    },
    // 处理详情页
    todetails(row){
      
    },
    // 处理分页
    moment,
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.pageSize = val;
      this.params.page = 1;
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.page = val;
    },
    // 处理标签页切换函数
    async handleClick(tab, event) {
      // console.log(tab, event);
      // console.log(this.activeName);
      let temp = {
        ...this.params
      };
      if (this.activeName !== "所有订单") {
        temp.status = this.activeName;
      }
      let res = await pageQuery(temp);
      // console.log(res);
      this.tableData = res.data.list;
      this.total = res.data.total;
    }
  },
  // 以下是生命周期钩子
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.handleClick();
  },
  /**
   * el 被新创建的 vm.$ el 替换，并 挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
   */
  mounted() {},
  /**
   * 实例销毁之前调用。在这一步，实例仍然完全可用。
   */
  beforeDestroy() {},
  /**
   * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
   * 所有的事件监听器会被移除，所有的子实例也会被销毁。
   */
  destroyed() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.cancle {
  color: #ffba00;
}
</style>
